<template>
  <div class="addLandPage">
    <addMap
      @dataList="dataList"
      :landList="landList"
      v-if="mapLoading"
      :baseGeo="baseGeo"
    ></addMap>
    <!-- 弹出层 -->
    <van-popup
      v-model="addShow"
      position="bottom"
      closeable
      close-icon="close"
      round
      :style="{ height: '70%' }"
    >
      <div class="tit">地块信息</div>
      <div class="addForm">
        <van-field
          v-model="addForm.landName"
          label="地块名称"
          placeholder="请输入地块名称"
        />
        <van-field
          v-model="addForm.landArea"
          label="地块面积"
          placeholder="请输入地块面积"
        />
        <div class="landType">
          <div class="typeLabel">地块类型：</div>
          <div
            class="type"
            :class="{ typeActive: typeId === item.id }"
            @click="typeActiveClick(item)"
            v-for="item in landTypeList"
            :key="item.id"
          >
            {{item.name}}
          </div>

        </div>
        <van-field
          label="负责人"
          v-model="addForm.name"
          @click="openUserList()"
          placeholder="请选择负责人"
          readonly
          right-icon="arrow"
        />
        <van-field
          v-model="addForm.phone"
          type="tel"
          label="负责人手机号"
          placeholder="请输入手机号"
        />
        <van-field
          v-model="addForm.address"
          type="textarea"
          rows="3"
          label="地块地址"
          placeholder="请输入地块地址"
        />
      </div>
      <div class="formBtn">
        <van-button type="primary" style="width: 80%" round @click="submit()"
          >确 定</van-button
        >
      </div>
    </van-popup>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        value-key="name"
        @cancel="onCancel"
        @confirm="onConfirm"
        :loading="loading"
      />
    </van-popup>
  </div>
</template>

<script>
import addMap from '@/components/addMap'
import wx from 'weixin-js-sdk'

import {
  getUserListApi,
  addLandApi,
  getLandListApi,
  getBaseInfoApi,
  getSonDictByCodeApi
} from '@/api/addLand'
import { Toast } from 'vant'
export default {
  name: 'ShuzhongtianH5AddLand',
  components: {
    addMap
  },

  data () {
    return {
      addShow: false,
      addForm: {
        geoInfo: '',
        baseId: 1,
        landName: '',
        landType: '',
        responsiblePerson: '',
        name: '',
        phone: null
      },
      typeId: 1,
      columns: [],
      loading: true,
      showPicker: false,
      baseId: 1,
      landList: [],
      mapLoading: false,
      baseGeo: '',
      landTypeList: []
    }
  },

  mounted () {
    this.baseId = this.$route.query.baseId
    Toast('请按照实际的地块边界绘制，以免生产数据出现偏差')
    this.getBaseInfo()
    this.getLandList(this.baseId)
    this.typeActiveClick(1)
    this.getSonDictByCode()
    document.title = '添加地块'
  },

  methods: {
    // 展示已拥有地块
    async getLandList (baseId) {
      const res = await getLandListApi(baseId)
      this.landList = res.data
      this.mapLoading = true
    },
    // 获取基地经纬度
    async getBaseInfo () {
      if (this.baseId) {
        const res = await getBaseInfoApi(this.baseId)
        console.log(res.data.baseGeo)
        this.baseGeo = res.data.baseGeo
      } else {
        console.log('请输入基地ID')
      }
    },
    // 地块类型字典
    async getSonDictByCode () {
      const res = await getSonDictByCodeApi('DKLX')
      console.log(res)
      this.landTypeList = res.data
    },
    // 地图数据给到表单
    dataList (e) {
      console.log(e)
      this.addForm.geoInfo = e.polygonSubmit
      this.addForm.geoCenter = e.polygonCenter
      this.addForm.landArea = e.area
      this.addForm.address = e.address
      this.addShow = true
    },
    typeActiveClick (item) {
      this.typeId = item.id
      this.addForm.landType = item.code
    },
    async openUserList () {
      this.addShow = false
      this.showPicker = true
      const res = await getUserListApi(this.baseId)
      this.columns = res.data
      this.loading = false
    },
    onConfirm (value, index) {
      console.log(value)
      this.addForm.responsiblePerson = value.userId
      this.addForm.name = value.name
      this.addForm.phone = value.phone
      this.showPicker = false
      this.addShow = true
    },
    onCancel () {
      Toast('取消')
      this.showPicker = false
      this.addShow = true
    },
    submit () {
      this.addForm.baseId = this.$route.query.baseId
      if (!this.addForm.geoInfo) {
        Toast('请圈出地块')
      } else if (!this.addForm.landName) {
        Toast('请填写名称')
      } else if (!this.addForm.name && !this.addForm.phone) {
        Toast('选中负责人并填写手机号')
      } else if (
        !!this.addForm.geoInfo &&
        !!this.addForm.landName &&
        !!this.addForm.name &&
        !!this.addForm.phone
      ) {
        addLandApi(this.addForm).then((res) => {
          Toast('新增成功')
          setTimeout(() => {
            wx.miniProgram.navigateBack({
              success: function (e) {
                var page = wx.getCurrentPages().pop()
                if (page === undefined || page == null) return
                page.onLoad() // 刷新数据
              }

            })
          }, 500)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.addLandPage {
  width: 375px;
  height: 100vh;
}
.tit {
  text-align: center;
  margin: 24px 0;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #0a241b;
}
.addForm {
  .landType {
    display: flex;
    height: 44px;
    line-height: 44px;
    .typeLabel {
      margin-left: 15px;
      color: #646566;
      font-size: 14px;
      margin-right: 20px;
    }
    .type {
      width: 40px;
      height: 25px;
      margin: auto 5px;
      font-size: 12px;
      border: 1px solid #dad7d7;
      border-radius: 5px;
      color: #000;
      text-align: center;
      line-height: 25px;
      font-weight: 600;
    }
  }

  .typeActive {
    background: #00c586;
    color: #ffffff !important;
  }
}
.formBtn {
  display: flex;
  justify-content: space-around;
}
</style>
